<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
	</head>
	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 100%"></div>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=RFKpacpXiTfGFnhZnTtm7g71UOu1upuE"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				backgroundColor: '#000',
				globe: {
					baseTexture:  'img/pic-1.jpg',
					heightTexture:  'img/pic-5.jpg',

					displacementScale: 0.1,

					shading: 'lambert',

					environment:  'img/pic-3.jpg',

					light: {
						ambient: {
							intensity: 0.1
						},
						main: {
							intensity: 1.5
						}
					},

					layers: [{
						type: 'blend',
						blendTo: 'emission',
						texture: 'img/pic-4.jpg'
					}, {
						type: 'overlay',
						texture: 'img/pic-2.jpg',
						shading: 'lambert',
						distance: 5
					}]
				},
				series: []
			};
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>
	</body>
</html>
